<template>
	<view class="page">
		<view class="safe" style="width: 100%; background-color: #fff;" :style="{height:safe+'rpx'}"></view>
		<view class="topTitle">
			<text>购物车</text>
		</view>
		
		<view v-if="cardList.length>0" class="details" >
			<u-checkbox-group @change="checkboxGroupChange">
				<view class="readList" v-for="(item,index) in cardList" :key='index'>
					<u-checkbox @change="checkboxChange" v-model="item.checked" :name="item.goodsName"></u-checkbox>
					<view class="left" >
						<image style="width: 180rpx; height: 200rpx;" :src="item.picPosition[0]" mode="widthFix"></image>
					</view>
					<view class="right" >
						<text>{{item.goodsName}} </text>
						<view class="disc">
							<text> {{item.goodsContent}}</text>
						</view>
						<view class="footTxt">
							<view class="">
								<text style="color: #ff0000; font-size: 32rpx; font-weight: bold;">￥</text><text>{{item.goodsPrice}}</text>
							</view>
							<view class="" style="display: flex; flex-direction: row;">
								<view class="" style="border: 1rpx solid #ccc; width: 40rpx; height: 40rpx; line-height: 36rpx; text-align: center;">
									<text @click="cardDel(item)">-</text>
								</view>
								<view class="" style="border: 1rpx solid #ccc; width: 60rpx; height: 40rpx; line-height: 36rpx; text-align: center;">
									<text>{{item.num}}</text>
								</view>
								<view class="" style="border: 1rpx solid #ccc; width: 40rpx; height: 40rpx; line-height: 36rpx; text-align: center;">
									<text @click="cardAdd(item)">+</text>
								</view>
							</view>
							
							<!-- <view class="butt">
								
							</view> -->
						</view>
					</view>
				</view>

			</u-checkbox-group>
			<view class="fixend">
				<u-checkbox @change="AllChange" v-model="all">全{{all?'不':''}}选</u-checkbox>
				<view class=" rightbott">
					<view class="">
						<text>合计:</text>
						<text style="margin-left: 20rpx; font-size: 32rpx; color: #ff0000;"> ￥{{totalPrice}}</text>
					</view>
					<view class="buyBtn" @click="pay()">
						<text>去结算({{totalNum}})</text>
					</view>
				</view>
			</view>
			<!-- <checkbox-group @change="checkboxChange">
				<view class="readList" v-for="(item,index) in cardList" :key='index' @click.capture="enterDetail()">
					<view class="left">
						<label>
							<view>
								<checkbox :value="item.title" :checked="item.checked" @click.stop="()=>{}" />
							</view>

						</label>
					</view>
					<view class="right">
						<text>{{item.title}} {{item.decs}}</text>
						<view class="">
							<text></text>
						</view>
						<view class="footTxt">
							<view class="">
								<text style="color: #ff0000; font-size: 32rpx; font-weight: bold;">￥</text><text>{{item.price}}元</text>
							</view>

							<u-number-box v-model="value" @change="valChange" :min="1" :max="100"></u-number-box>
							
						</view>
					</view>
				</view>
			</checkbox-group> -->

		</view>

		<view v-else class="noinfo">
			<noinfo :titleName="'购物车空空如也'"></noinfo>
			<view class="" style="padding-left: 20rpx;">

				<text class="title" style="height: 60rpx; line-height: 60rpx;">猜你喜欢</text>

				<goodsList :list='guessLikeList'></goodsList>
			</view>
		</view>

	</view>
</template>

<script>
	import noinfo from "../../component/no_info.vue"
	import goodsList from "../../component/goodsList.vue"
	export default {
		components: {
			goodsList,
			noinfo,

		},
		data() {
			return {
				safe: this.globalData.safeH * 2,
				cardList: this.globalData.cardList,
				all:false,
				couponId:0,
				current: 0,
				
                guessLikeList:[]
			}
		},
		computed: {
			totalPrice: {
				get() {
					let total = 0
					this.cardList.forEach(item => {
						if (item.checked) {
							total += item.goodsPrice * item.num
						}
					})
					return total.toFixed(2)
				},
				set(val) {}
			},
			totalNum: {
				get() {
					let num = 0
					this.cardList.forEach(item => {
						if (item.checked) {
							num++
						}
					})
					return num
				},
				set(val) {}
			}


		},
		onReady() {

			// const safeH=uni.getSystemInfoSync().safeAreaInsets.top||''
			console.log(this.globalData.safeH)
		},
		onLoad() {
			this.cardList.map(val => {
				this.$set(val, 'checked', false)
				
			})
            this.getLike()
		},
		onShow() {
			

		},
		
		methods: {
			pay(){
				this.getcoupon()
				let parmas={goodsMsg:this.cardList}
				this.$http.post('/goods_order/buyCar?couponid='+this.couponId,this.cardList).then(res=>{
					console.log(res)
					uni.showToast({
						title:'购买成功'
					})
                    this.cardList=this.cardList.filter(item=>{
                        return item.checked===false
                    })
                    this.globalData.cardList=this.cardList
                    uni.setStorage({
                        key:'cardList',
                        data: this.globalData.cardList
                    })
                    uni.setTabBarBadge({
                    	index: 2,
                    	text: ''+ this.globalData.cardList.length
                    })
				})
			},
            getLike(){
                this.$http.get('/goods_msg/guessLike').then(res => {
                	console.log(res)
                	this.guessLikeList = res.list
                })
            },
			getcoupon(){
				this.$http.get('/goods_coupon/getUserCoupon').then(res=>{
					console.log(res)
					if(res.list.length>0){
						this.couponId=res.list[0].couponId
					}
				})
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxChange(e) {

				var items = this.cardList,
					values = e.name;

				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]

					if (values.includes(item.title)) {
						this.$set(item, 'checked', e.value)
					}
				}
				
			},
			// 全选
			
			AllChange(e) {
				console.log(e)
				if(e.value){
					this.cardList.map(val => {
						this.$set(val, 'checked', true)
					})
					this.all=true
				}else{
					this.cardList.map(val => {
						this.$set(val, 'checked', false)
						
					})
					this.all=false
				}
				
			},
			checkboxGroupChange(e) {
				console.log(e)
                if ( this.cardList.every(item => {
                		return item.checked === true
                	})) {
                        console.log(1111111)
                	this.all=true
                }else{
                    console.log(222222)
                	this.all=false
                }
				// var items = this.cardList,
				// 	values = e.name;

				// for (var i = 0, lenI = items.length; i < lenI; ++i) {
				// 	const item = items[i]

				// 	if (values.includes(item.title)) {
				// 		this.$set(item, 'checked', true)
				// 	} else {
				// 		this.$set(item, 'checked', false)
				// 	}
				// }
			},
			enterDetail() {
				console.log("enter")
				uni.navigateTo({
					url: '../enter/detail'
				})
			},
			cardAdd(it, data) {
				if(it.num<it.goodsNum){
					
					this.add(it)
				}else{
					uni.showToast({
						title:'购买数量超出库存数量',
						icon:'none'
					})
				}
				
			},
			cardDel(it, data) {
				let _this = this
				
				
				if (it.num === 1) {
					wx.showModal({
						title: '确认删除',
						content: '您确认要删除商品吗？',
						success: function(res) {
							if (res.confirm) {
								_this.del(it, 'del')
							} else if (res.cancel) {
								
							}
						}
					})
				} else {
					this.del(it)
					
				}


			}
		}
	}
</script>



<style lang="scss" scoped>
	.page {
		width: 100%;
		min-height: 100%;
		height: auto;
		background-color: #f6f7fc;
		padding-bottom: 160rpx;
		.title {

			font-size: 30rpx;
			font-weight: bold;
		}

		.topTitle {
			width: 100%;
			height: 80rpx;
			background-color: #fff;
			font-size: 32rpx;
			line-height: 80rpx;
			margin-bottom: 10rpx;
			padding-left: 20rpx;
			// font-weight: bold;

		}
		.fixend{
			height: 100rpx;
			width: 750rpx;
			line-height: 100rpx;
			padding-left: 20rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			.rightbott{
				width: 440rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.buyBtn{
					width: 180rpx;
					height: 100rpx;
					background-color: #ff0000;
					color: #fff;
					text-align: center;
				}
			}
		}
		.details {
			padding: 20rpx;

			.readList {
				width: 100%;
				height: 240rpx;
				margin-bottom: 20rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				background-color: #fff;
				padding: 20rpx;

				.left {
					width: 180rpx;
					height: 240rpx;
					background-color: #18B566;
					margin-right: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					background-color:rgba(33,33,33,0.33) ;
				}

				.right {
					width: 500rpx;
					height: 240rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: flex-start;
					.disc{
						font-size: 30rpx;
						color: #4D4C4C;
						width: 100%;
						height: 90rpx;
						line-height: 46rpx;
						 text-overflow: -o-ellipsis-lastline;
						  overflow: hidden;
						  text-overflow: ellipsis;
						  display: -webkit-box;
						  -webkit-line-clamp: 2;
						  line-clamp: 2;
						  -webkit-box-orient: vertical;
					}
					.footTxt {
						width: 100%;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;

						.font12 {
							font-size: 20rpx;
							color: #ccc;
						}

						.butt {
							width: 140rpx;
							height: 36rpx;
							border: 2rpx solid #19BE6B;
							text-align: center;
							line-height: 30rpx;
							font-size: 22rpx;
							color: #4CD964;
						}
					}
				}
			}
		}
	}
</style>
